<template>
  <div class="about-us-wrapper">
    <div class="about-us-content">
      <div v-for="(item, index) in aboutUsList" :key="index" class="about-us">
        <div class="logo"></div>
        <div class="title">{{ item.title }}</div>
        <div class="tips">{{ item.tips }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      aboutUsList: [
        {
          logo: '专',
          title: '专注甄选',
          tips: '一句文案，一句文案'
        },
        {
          logo: '选',
          title: '选择丰富',
          tips: '一句文案，一句文案'
        },
        {
          logo: '诚',
          title: '诚信认证',
          tips: '一句文案，一句文案'
        },
        {
          logo: '服',
          title: '服务保障',
          tips: '一句文案，一句文案'
        },
      ]
    }
  }
}
</script>

<style scoped lang='scss'>
@import "@/style/color.scss";
.about-us-wrapper {
  width: 100%;
  height: 220px;
  background-color: #16905F;
}
.about-us-content {
  width: $bigWidth;
  height: 100%;
  margin: 0 auto;
  display: flex;
}
.about-us {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  position: relative;
  .logo {
    width: 50px;
    height: 60px;
    background-color: #fff;
  }
  .title {
    font-size: 20px;
    margin: 15px 0;
  }
  &::after {
    content: "";
    position: absolute;
    top: calc(50% - 40px);
    right: 0;
    width: 1px;
    height: 80px;
    background: #FFFFFF;
    opacity: 0.15;
  }
}
.about-us:last-child::after {
  display: none;
}
</style>
